<template>
  <!--居中弹框-->
  <view class="app-mask-center"  v-if='showModal' @touchmove.stop="()=>false">
    <view class="cmask-container columnSC">
      <!-- 顶部标题 -->
      <slot name="modalHeader">
        <view class="cmask-top">
          是否确定恢复运营？
        </view>
      </slot>
      <!-- body -->
      <slot name="modalBody">
        <view class="cmask-body rowSS">
          <h4>您已设置停运恢复营运后需要按时上报检查结果。</h4>
        </view>
      </slot>
      <!-- 底部 -->
      <slot  name="modalFooter">
        <view class="cmask-btn rowSS">
          <h2  @click="cancelBtnClick">取消</h2>
          <h3  @click="confirmBtnClick">确定</h3>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "CenterShowModal",
    props: {

    },
    data() {
      return {
        showModal:false
        // showModalTest:false,
      };
    },
    methods:{
      showModalFunc(){
        this.showModal=true;
      },
      closeModalFunc(){
        this.showModal=true;
      },
      cancelBtnClick(){
        this.showModal=false
        this.$emit("cancelBtn")
      },
      confirmBtnClick(){
        this.showModal=false
        this.$emit("confirmBtn")
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 弹窗居中 */
  .app-mask-center {
    overflow: hidden;
    position: fixed;
    flex: 1;
    width: 100vw;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 1, 0.7);
    z-index: 10000;
    // 顶部标题
    .cmask-top{
      font-size: 36upx;
      color: #000000;
      margin-top: 50upx;
    }
    .cmask-body{
      position: relative;
      margin-top: 26upx;
      width: 484upx;
      min-height: 78upx;
      h4{
        font-size: 30upx;
        color: #888888;
        line-height: 45upx;
      }
    }
    .cmask-btn{
      position: absolute;
      left: 0;
      bottom: 0;
      h2{
        border-top: 1px solid #dcdee3;
        width: 269upx;
        height: 100upx;
        background: #ffffff;
        font-size: 36upx;
        text-align: center;
        color: #333333;
        line-height: 100upx;
      }
      h3{
        border-top: 1px solid #dcdee3;
        border-left: 1px solid #dcdee3;
        width: 269upx;
        height: 100upx;
        background: #ffffff;

        font-size: 36upx;
        text-align: center;
        color: #FF7620;
        line-height: 100upx;
      }
    }

    .cmask-container{
      width: 540upx;
      min-height: 337upx;
      background: #ffffff;
      border-top-right-radius: 14upx;
      border-top-left-radius: 14upx;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -40%);
      z-index: 10000;
    }
  }
</style>
